<%@page contentType="text/html" pageEncoding="UTF-8"%>
<div id="top">
    
    <div id="search">
        <form onsubmit="return serializeForm(this)">
            <input type="hidden" name="command" value="search"/>
            <input type="text" id="autocomplete" name="postData"/>
            <div id="autocomplete_choices" class="autocomplete"></div>
            <input type="submit" value="Buscar"/>
        </form>
        
        <span class="link" onclick="showElement('advanced')">Búsqueda avanzada</span>
        <div id="advanced" style="display:none">
            <form onsubmit="return serializeForm(this)">
                <input type="hidden" name="command" value="advancedSearch"/>
                <p><span class="medium">Equipo</span><input name="equipment" type="text" size="10"/></p>
                <p><span class="medium">Mant.</span><input name="maintenance" type="text" size="10"/></p>
                <h4>Fecha de alta</h4>
                <p class="cal">Desde <input name="created-from" type="text" size="10"/></p>
                <p class="cal">Hasta <input name="created-to" type="text" size="10"/></p>
                <h4>Fecha de baja</h4>
                <p class="cal">Desde <input name="dropped-from" type="text" size="10"/></p>
                <p class="cal">Hasta <input name="dropped-to" type="text" size="10"/></p>
                <h4>Disponibilidad</h4>
                <p class="cal">Desde <input name="available-from" type="text" size="10"/></p>
                <p class="cal">Hasta <input name="available-to" type="text" size="10"/></p>
                <h4>Libre</h4>
                <p class="cal">Desde <input name="vacant-from" type="text" size="10"/></p>
                <p class="cal">Hasta <input name="vacant-to" type="text" size="10"/></p>
                <h4>Ocupada</h4>
                <p class="cal">Desde <input name="occupied-from" type="text" size="10"/></p>
                <p class="cal">Hasta <input name="occupied-to" type="text" size="10"/></p>
                <p>
                    <button>Buscar</button>
                    <span class="link red" onclick="cancelElement('advanced')">Cancelar</span>
                </p>
            </form>
        </div>
    </div>
    
    <h2>Líneas</h2>
    
</div><!--/top-->

<div id="middle">
    <div>
        <span class="link big" onclick="showElement('create')">Agregar</span>
        <span class="link" onclick="showElement('upload')">Subir muchos de un archivo</span>
    </div>
    
    <div id="create" style="display:none">
        <form onsubmit="return serializeForm(this)">
            <input type="hidden" name="command" value="create"/>
            <table class="clean-table">
                <tr><th>Descripción</th><td><input name="description" type="text"/></td></tr>
                <tr><th>Fecha de baja</th><td class="cal"><input name="drop-date" type="text"size="12"/></td></tr>
                <tr><th>Disponibilidad</th><td class="cal"><input name="available-date" type="text" size="12"/></td></tr>
                <tr>
                    <th colspan="2">
                        <input type="submit" value="Guardar"/>
                        <span class="link red" onclick="cancelElement('create')">Cancelar</span>
                    </th>
                </tr>
            </table>
        </form>
    </div>
    
    <iframe id="upload" src="about:blank" style="display:none"></iframe>
    
</div><!--/middle-->

<div id="bottom">
    <table id="manager" border="1">
        <thead>
            <tr>
                <th class="left" colspan="2">
                    <label>Ver:</label>
                    <select onchange="changeFilter(this)">
                        <option name="all" selected="selected">Todas</option>
                        <option name="search">Buscadas</option>
                        <option name="available">Disponibles</option>
                        <option name="unavailable">No disponibles</option>
                        <option name="ocuppied">Ocupadas</option>
                        <option name="free">Libres</option>
                        <option name="dropped">Baja</option>
                    </select>
                </th>
                <th class="right">
                    <label>Ordenar:</label>
                    <select onchange="changeOrder(this)">
                        <option name="description" selected="selected">Descripción</option>
                        <option name="created">Fecha de alta</option>
                        <option name="dropped">Fecha de baja</option>
                        <option name="available">Disponibilidad</option>
                        <option name="status">Status</option>
                    </select>
                </th>
            </tr>
        </thead>
    </table>
    
    <div id="list">
        
        <div id="100" class="item">
            
            <table class="wide clean-table">
                <tr>
                    <td colspan="2"><h3 id="description100">Línea 1</h3></td>
                    <th id="actions100"><button onclick="edit('100')">Editar</button> <button onclick="del('100')">Borrar</button></th>
                </tr>
                <tr>
                    <td><strong>Fecha de alta: </strong><span>2008-03-11</span></td>
                    <td><strong>Fecha de baja: </strong><span id="drop-date100">2008-03-11</span></td>
                    <td><strong>Disponibilidad: </strong><span id="available-date100">2008-03-11</span></td>
                </tr>
                <tr>
                    <td colspan="3"><strong>STATUS:</strong> <span>Ocupada</span></td>
                </tr>
            </table>
            
            <div>
                <table id="manager" border="1">
                    <tr>
                        <th>Equipo</th>
                        <th>Mantenimiento</th>
                        <th>Inicia</th>
                        <th>Termina</th>
                    </tr>
                    <tr class="gray">
                        <td>TA-B52</td>
                        <td>Primer mantenimiento</td>
                        <td>2006-04-03</td>
                        <td>2006-04-10</td>
                    </tr>     
                    <tr class="green">
                        <td></td>
                        <td></td>
                        <td>2006-04-11</td>
                        <td>2006-04-12</td>
                    </tr> 
                    <tr class="gray">
                        <td>TA-B52</td>
                        <td>Cambio de alternadores</td>
                        <td>2006-04-13</td>
                        <td>2006-04-14</td>
                    </tr>
                </table>
            </div>
            
        </div><!--/item-->
        
    </div><!--/list-->
</div><!--/bottom-->

<script type="text/javascript">
    controller = 'Lines';
    filter = "all";
    order = "description";
    search = null;
    loadAutocompleter();
    loadItems();
    observeCalInputs();
</script>

